<template>
    <div class="container">

      <el-form :inline="true">
        <el-form-item label="关键字">
          <el-input v-model="searchForm.orgName" placeholder="标签名/内容"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="search" >搜索</el-button>
        </el-form-item>
        <el-form-item>
          <el-button @click="reset">重置</el-button>
        </el-form-item>
      </el-form>

      <el-table
        :data="tableData"
        border
        style="width: 100%"
        size="mini">
        <el-table-column
          prop="id"
          label="ID"
          min-width="25%">
        </el-table-column>
        <el-table-column
          fixed
          prop="orgName"
          label="组织名"
          min-width="25%">
        </el-table-column>
        <el-table-column
          prop="manager.ssn"
          label="组织管理者"
          min-width="25%">
        </el-table-column>
        <el-table-column
          label="操作"
          min-width="25%">
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row)" type="text" size="small">选择</el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
        style="padding: 10px 10px 5px 10px;"
        :current-page="pageData.current"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-size="pageData.size"
        layout="total, prev, pager, next, jumper"
        :total="total"
      />
    </div>
</template>

<script>
  import TagsTable from './OrgsTable'
  import Pagination from '@/components/Pagination'
  export default {
    name: 'OrgsPickDialog',
    components: {
      TagsTable,
      Pagination
    },
    data: function() {
      return {
        searchForm: {
          orgName:'',
        },
        pageData: {
          current: 1,
          size: 3,
        },
        tableData: [],
        total: 0

      }
    },
    props: {
      dialogTableVisible: Boolean,
    },
    created: function() {
      // console.log(this.$api)
      this.search();
    },
    methods: {
      search(page) {
        let formData = {}
        if(this.searchForm.orgName) formData['orgName'] = this.searchForm.orgName;
        formData['current'] = this.pageData.current;
        formData['size'] = this.pageData.size;
        this.$api.orgsPage(formData)
          .then(res => {
            console.log(res)
            this.tableData = res.records;
            this.pageData.current = res.current;
            this.pageData.size = res.size;
            this.total = res.total;
          });
      },
      reset() {
        Object.assign(this.$data.searchForm, this.$options.data().searchForm)
      },

      handleSizeChange(val) {
        this.pageData.size = val;
        this.search();
      },

      handleCurrentChange(val) {
        this.pageData.current = val;
        this.search();
      }
    }
  }
</script>

<style scoped>
  .container {
    padding: 0;
    border: 0;
  }
</style>
